<template>
  <div :class="type == 'FlinkJar' ? 'jar from-box' : 'sql from-box'">
    <el-form
      ref="form"
      :model="filterModel"
    >
      <el-divider content-position="left">
        基础配置：
      </el-divider>
      <el-form-item label="作业名:" prop="name">
        <el-input v-model="filterModel.name" :disabled="defaultTaskData && defaultTaskData.step >= 4 || type == 'FlinkJar'" placeholder="请输入作业名"/>
      </el-form-item>
      <el-form-item label="执行模式:" prop="type">
        <el-select v-model="filterModel.type" :disabled="defaultTaskData && defaultTaskData.step >= 4" placeholder="请选择任务类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="filterModel.type == 'standalone' || filterModel.type == 'yarn-session'" label="Flink集群:" prop="clusterId">
        <el-select v-model="filterModel.clusterId" :disabled="defaultTaskData && defaultTaskData.step >= 4" placeholder="请选择Flink集群">
          <el-option
            v-for="item in taskData.listSessionEnableData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="filterModel.type == 'yarn-per-job' || filterModel.type == 'yarn-application'" label="Flink集群:" prop="clusterConfigurationId">
        <el-select v-model="filterModel.clusterConfigurationId" :disabled="defaultTaskData && defaultTaskData.step == 4" placeholder="请选择Flink集群">
          <el-option
            v-for="item in taskData.clusterConfigurationData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="SavePoint策略:" prop="savePointStrategy">
        <el-select v-model="filterModel.savePointStrategy" :disabled="defaultTaskData && defaultTaskData.step >= 4" placeholder="请选择SavePoint策略">
          <el-option
            v-for="item in savePointStrategyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import _ from 'lodash'
import { queryTaskParams } from '../api/workDevelopment'
import IconFont from './iconFont.vue'

export default {
  name: 'FromBox',
  components: { IconFont },
  props: {
    taskId: { type: String, },
    type: { type: String, default: '' }
  },
  data() {
    return {
      timer: null,
      taskData: {
        listSessionEnableData: [],
        clusterConfigurationData: []
      },
      defaultTaskData: {},
      filterModel: {
        name: '',
        type: 'standalone',
        clusterConfigurationId: null,
        parallelism: 1,
        // insert: false,
        // batchModel: false,
        // statementSet: false,
        // fragment: false,
        savePointStrategy: 0,
        savePointPath: '',
        // alertGroupId: null,
        // enableDataSyncStartTime: false,
        // dataSyncStartTime: '',
        // alarmEmail: '',
        config:
          this.type === 'FlinkJar'
            ? [
              {
                key: 'mainClass',
                value: ''
              }
            ]
            : [],
        clusterId: null,
        // checkPoint: 0,
        maxRowNum: 100,
        useResult: true,
        useChangeLog: false,
        useAutoCancel: false
      },
      typeOptions: [ // 该版本暂时只需要standalone模式
        {
          value: 'local',
          name: 'Local'
        },
        {
          value: 'standalone',
          label: 'Standalone'
        },
        {
          value: 'yarn-session',
          name: 'Yarn Session'
        },
        {
          value: 'yarn-per-job',
          name: 'Yarn Per-Job'
        },
        {
          value: 'yarn-application',
          name: 'Yarn Application'
        }
      ],
      savePointStrategyOptions: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '最近一次'
        },
        {
          value: 2,
          label: '最早一次'
        },
        {
          value: 3,
          label: '指定一次'
        }
      ],
      alertGroupDataOptions: [],
      createConfig: {
        key: '',
        value: ''
      }
    }
  },
  watch: {
    filterModel: {
      deep: true,
      handler(newValue) {
        this.changeFrom()
      },
      immediate: true
    }
  },
  mounted() {
    this.queryTaskParams()
    console.log('Flink集群=====taskData', this.taskData)
    // this.getTaskInfo(this.taskId);
    // this.queryOption()
  },
  methods: {
    createConfigM() {
      if (this.defaultTaskData.step === 4) {
        return
      }
      const item = _.cloneDeep(this.createConfig)
      this.filterModel.config.splice(this.filterModel.config.length, 0, item)
    },
    deleteRow(index) {
      if (this.defaultTaskData.step === 4) {
        return
      }
      this.filterModel.config.splice(index, 1)
    },
    changeFrom() {
      // clearTimeout(this.timer)
      // 自定义个定时器2秒后执行，一旦有新的事件发生会将这个定时器清除重新创建一个，只有三秒内不出现事件这个定时器才不会被销毁重构
      // this.timer = setTimeout(() => {
      this.$emit('changeFrom', Object.assign(this.defaultTaskData, this.filterModel), this.taskData)
      // }, 2000)
    },
    changeState() {
      // insert 语句集
      // this.$emit('getCode', this.filterModel.statementSet?this.filterModel.statement:'');
    },
    queryTaskParams() {
      queryTaskParams({ taskId: this.taskId })
        .then((res) => {
          console.log('queryTaskParams=====res====', res)

          this.taskData = res
          if (res.alertGroupData) {
            // 根本没勾8用上
            this.alertGroupDataOptions = res.alertGroupData
          }
          this.defaultTaskData = res.defaultTaskData
          // this.filterModel.alertGroupId =
          //     res.defaultTaskData.alertGroupId === 1 ? true : res.defaultTaskData.alertGroupId === 0 ? false : null
          this.filterModel.clusterConfigurationId = res.defaultTaskData.clusterConfigurationId
          this.filterModel.name = res.defaultTaskData.name
          this.filterModel.parallelism = res.defaultTaskData.parallelism
          this.filterModel.type = this.type === 'FlinkJar' ? 'yarn-application' : res.defaultTaskData.type
          this.filterModel.savePointStrategy = res.defaultTaskData.savePointStrategy
          // 根本勾8没这属性
          this.filterModel.alarmEmail = res.alarmEmail
          this.filterModel.savePointPath = res.defaultTaskData.savePointPath
          // this.filterModel.fragment = res.defaultTaskData.fragment
          this.filterModel.batchModel = res.defaultTaskData.batchModel
          // this.filterModel.statementSet = res.defaultTaskData.statementSet
          this.filterModel.statement = res.defaultTaskData.statement
          if (res.jobJson) {
            this.filterModel.enableDataSyncStartTime = JSON.parse(res.jobJson).enableDataSyncStartTime
            this.filterModel.dataSyncStartTime = JSON.parse(res.jobJson).dataSyncStartTime
          } else {
            this.filterModel.enableDataSyncStartTime = false
            this.filterModel.dataSyncStartTime = ''
          }

          this.filterModel.config = res.defaultTaskData.config.length
            ? res.defaultTaskData.config
            : this.type === 'FlinkJar'
              ? [
                {
                  key: 'mainClass',
                  value: ''
                }
              ]
              : []
          this.filterModel.clusterId = res.defaultTaskData.clusterId
          // this.filterModel.maxRowNum = _data.defaultTaskData.maxRowNum;
          // this.filterModel.useResult = _data.defaultTaskData.useResult;
          // this.filterModel.useChangeLog = _data.defaultTaskData.useChangeLog;
          // this.filterModel.useAutoCancel = _data.defaultTaskData.useAutoCancel;
          // batchModel
          if (res.defaultTaskData.jarFileName) {
            this.$emit('getJarName', res.defaultTaskData.jarFileName)
          }
          if (res.defaultTaskData.statement) {
            this.$emit('getCode', res.defaultTaskData.statement)
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped lang="less">
.from-box {
  height: calc(100% - 30px);
  overflow-y: scroll;
  padding: 10px 0;
  box-sizing: border-box;
  margin-top: 10px;
  .btn-span {
    background: #0079fe;
    padding: 2px 12px;
    color: #fff;
    border-radius: 4px;
  }
  .add_config_box{
    margin-top: 6px;
  }
  .icon_delete{
    cursor: pointer;
  }
  q-from {
    display: block;
    /*height: 500px;*/

    :deep(.text-right) {
      width: auto;
      min-width: 94px;
    }

    label {
      margin: 5px 0;
    }

    :deep(.q-field__marginal) {
      height: 40px;
    }

    :deep(.q-field--auto-height .q-field__control) {
      min-height: 40px;
    }

    :deep(.q-field--auto-height .q-field__native) {
      min-height: 40px;
    }

    :deep(.q-anchor--skip) {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      color: rgba(0, 0, 0, 0.54);
    }

    :deep(.q-field__before) {
      padding-right: 6px;
    }

    .configBox {
      display: flex;
      flex-direction: row;
      padding: 8px 0;
      flex-wrap: nowrap;
      :deep(.q-input) {
        margin: 5px;
      }

      label {
        margin: 5px;
      }

      span {
        border-radius: 50px;
        width: 25px;
        height: 25px;
        border: 1px solid #3a485a;
        text-align: center;
        font-size: 21px;
        margin-top: 13px;
        line-height: 22px;
        cursor: pointer;
      }
    }
  }
}

.sql {
  .d1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .d2 {
    width: 100%;
  }

  q-from {
    display: flex;
    flex-wrap: wrap;

    label {
      width: 100%;
      flex-direction: column;
    }

    :deep(.q-field__inner) {
      width: 88%;
    }

    .text-right {
      text-align: left;
    }

    .configBox {
      label {
        width: 45%;
      }
    }
  }
}

.jar {
  .d1 {
    height: 300px;
    width: 66%;
    display: flex;
    padding-bottom: 20px;
    flex-wrap: wrap;
  }

  .d2 {
    width: 34%;
    padding-left: 24px;
    height: 300px;
    overflow-y: scroll;
    padding-bottom: 30px;
  }

  q-from {
    display: flex;
    flex-wrap: wrap;

    label {
      width: 50%;
      /*flex-direction: column;*/
    }

    :deep(.q-field__inner) {
      width: 88%;
    }

    .text-right {
      /*text-align: left;*/
    }

    .configBox {
      label {
        width: 42%;
      }
    }
  }
}

.from-box::-webkit-scrollbar {
  width: 0 !important;
}
</style>
